Get this design system live on SharePoint.

Two things decide which path you can use: whether these pages need to stay interactive (the dashboard's charts, filters, side-nav, the QR links) and what your Microsoft 365 tenant allows.

Four ways in. Most teams should use Method 1 — it keeps the pages fully interactive and is a one-time setup. Pick based on how much you can host and whether you have a developer.

Before hosting, each page should be a single self-contained file with its fonts, logos, QR codes and scripts baked in — so it works anywhere with no broken links. Several pages here already have bundled versions.

1. Ask for the bundled (standalone) version of the page. Just say "give me a standalone version of the Codebase Atlas for hosting." You'll get one .html file with everything inlined.This is the version to host — not the working file, which references separate font/image files.
2. Save it somewhere you can find it, e.g. Tristar-Atlas-standalone.html. Double-click to confirm it opens correctly in your browser offline.
3. Repeat for each page you want on SharePoint — the Atlas, Referral Dashboard, HubSpot Guide, etc. Each becomes one portable file.

SharePoint embeds by web address, so the bundled file needs to live at an https:// URL. Any of these work — all have free tiers and serve a single HTML file fine.

This is the payoff. You'll add an Embed web part to a modern SharePoint page and point it at your hosted URL.

1. Go to the SharePoint site → open or create a page → click Edit (top right).
2. Hover between sections, click the circled + to add a web part, and choose Embed.If you don't see "Embed," see the troubleshooting note about the embed allow-list.
3. In the Embed box, paste your hosted URL (from Step B). It previews instantly.
4. For a taller, scroll-free view, paste the iframe snippet below instead of the bare URL and set a height that fits the page (the Atlas and dashboard like ~1400).
5. Click Republish. Staff with site access can now open and use the page right inside SharePoint.

<iframe src="https://YOUR-HOST/Tristar-Atlas-standalone.html"
        width="100%" height="1400" style="border:0;"
        title="Tristar PT Design System"></iframe>

Rather than embedding each page separately, give staff a single "Design System & Resources" SharePoint page that links everything. Cleaner to maintain and easier to find.

1. Create a new SharePoint page titled Design System & Resources.
2. Add a Hero or Quick Links web part with a tile for each resource — Codebase Atlas, Referral Dashboard, HubSpot How-To, Brand & Print pieces.
3. Point each tile at either the embedded page (Method 1) or the hosted URL directly (Method 2 — opens full-screen).
4. Add the page to the site's left navigation so it's one click from anywhere.
5. Optionally embed the Codebase Atlas right on this hub — its built-in tab bar already covers Overview, Architecture, Modules, Migration and Analytics.

If you can't host anything, you can still show pages inline in SharePoint as PDFs. Best for the static print pieces (one-pagers, drop kits); not for the interactive dashboard.

1. Export the page to PDF. Say "save the Referral One-Pager as a PDF" and you'll get a print-ready file.
2. In SharePoint, upload the PDF to a document library (e.g. Documents or a dedicated Resources library).
3. On a page, add the File Viewer web part and select the PDF — it renders inline, scrollable, no download needed.
4. PDFs are also fully searchable in SharePoint and easy for staff to download or print.

The most integrated option, for when you have a developer. The SharePoint Framework (SPFx) wraps the system as a real, first-class web part — no iframe, no external hosting, deployed through your tenant's app catalog.

The big advantage of the hosted-embed approach: update once, everywhere updates.

• Embed / link methods: when a page changes, re-bundle it and replace the file at the same URL. Every SharePoint page embedding it shows the new version automatically — nothing to re-do in SharePoint.
• PDF method: re-export and upload over the old file (keep the same name) so the File Viewer picks it up.
• Keep your standalone files in one folder (or a SharePoint Resources library) so there's a single source of truth for what's live.
• Note the date on each page when you publish a refresh, so staff know they're looking at current info.

The handful of things that trip people up, and the fix for each.